<template>
  <div>
    <input id="excel-upload-input" ref="txt-upload-input" type="file" accept=".txt" class="c-hide" @change="handkeFileChange">
    <!--<el-button type="info" icon="el-icon-plus" @click="handleUpload">批量导入用户名</el-button>-->
  </div>
</template>

<script>

  export default {
    data() {
      return {
      }
    },
    methods: {
      generateDate({ header, results }) {
        this.excelData.header = header
        this.excelData.results = results
        this.$emit('on-selected-file', this.excelData)
      },
      handleUpload() {
        document.getElementById('excel-upload-input').click()
      },
      handkeFileChange(e) {
        const files = e.target.files
        const itemFile = files[0] // only use files[0]
        if (!itemFile) return
        this.readerData(itemFile)
        this.$refs['txt-upload-input'].value = null // fix can't select the same excel
      },
      readerData(itemFile) {
        const reader = new FileReader()
        reader.onload = e => {
          const data = e.target.result
          this.$emit('success', data)
        }
        reader.readAsText(itemFile);
      },
    }
  }
</script>

<style scoped>
  .c-hide{
    display: none;
    z-index: -9999;
  }
</style>
